<script setup lang="ts">
const milestones = [
  {
    year: '2013',
    title: '腾讯云正式成立',
    description: '开启云计算服务新篇章'
  },
  {
    year: '2016',
    title: '全球化布局',
    description: '数据中心遍布全球主要区域'
  },
  {
    year: '2019',
    title: '智能云升级',
    description: '全面布局人工智能服务'
  },
  {
    year: '2022',
    title: '产业互联网',
    description: '深化产业数字化转型'
  }
]

const partners = [
  {
    name: '战略合作伙伴1',
    logo: 'https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/partner1.png'
  },
  {
    name: '战略合作伙伴2',
    logo: 'https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/partner2.png'
  },
  {
    name: '战略合作伙伴3',
    logo: 'https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/partner3.png'
  },
  {
    name: '战略合作伙伴4',
    logo: 'https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/partner4.png'
  }
]
</script>

<template>
  <div class="about">
    <!-- Header -->
    <t-header height="64px" class="header">
      <div class="header-content">
        <div class="logo">
          <img src="https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/3aa8d06f-3701-4b16-b1a2-68a0c40d8a97.svg" alt="Tencent Cloud" />
        </div>
        <t-menu mode="horizontal">
          <t-menu-item value="products">产品</t-menu-item>
          <t-menu-item value="solutions">解决方案</t-menu-item>
          <t-menu-item value="pricing">定价</t-menu-item>
          <t-menu-item value="docs">文档</t-menu-item>
          <t-menu-item value="about">关于我们</t-menu-item>
        </t-menu>
        <div class="header-right">
          <t-button theme="primary">免费体验</t-button>
        </div>
      </div>
    </t-header>

    <!-- About Hero -->
    <div class="about-hero">
      <h1>关于腾讯云</h1>
      <p>全球领先的云计算、大数据、AI服务提供商</p>
    </div>

    <!-- Company Info -->
    <div class="company-info">
      <div class="info-grid">
        <div class="info-card">
          <h3>公司简介</h3>
          <p>腾讯云是腾讯公司旗下的云计算品牌，依托腾讯强大的技术实力，致力于为企业和开发者提供安全、可靠的云服务。</p>
        </div>
        <div class="info-card">
          <h3>全球布局</h3>
          <p>在全球多个地区部署数据中心，为客户提供全球化的云服务基础设施。</p>
        </div>
        <div class="info-card">
          <h3>技术创新</h3>
          <p>持续投入技术研发，在云计算、大数据、人工智能等领域保持创新领先。</p>
        </div>
      </div>
    </div>

    <!-- Statistics -->
    <div class="statistics">
      <t-row justify="space-around">
        <t-col :span="6">
          <div class="stat-item">
            <h2>2000+</h2>
            <p>全球节点</p>
          </div>
        </t-col>
        <t-col :span="6">
          <div class="stat-item">
            <h2>100+</h2>
            <p>可用区</p>
          </div>
        </t-col>
        <t-col :span="6">
          <div class="stat-item">
            <h2>200+</h2>
            <p>云产品</p>
          </div>
        </t-col>
      </t-row>
    </div>

    <!-- Milestones -->
    <div class="milestones">
      <h2>发展历程</h2>
      <t-timeline mode="alternate">
        <t-timeline-item v-for="milestone in milestones" :key="milestone.year">
          <template #dot>
            <t-avatar size="small">{{ milestone.year }}</t-avatar>
          </template>
          <div class="milestone-content">
            <h3>{{ milestone.title }}</h3>
            <p>{{ milestone.description }}</p>
          </div>
        </t-timeline-item>
      </t-timeline>
    </div>

    <!-- Partners -->
    <div class="partners">
      <h2>合作伙伴</h2>
      <div class="partner-grid">
        <div v-for="partner in partners" :key="partner.name" class="partner-card">
          <t-image :src="partner.logo" :alt="partner.name" />
        </div>
      </div>
    </div>

    <!-- Contact -->
    <div class="contact">
      <h2>联系我们</h2>
      <t-row :gutter="[24, 24]">
        <t-col :span="8">
          <div class="contact-card">
            <t-icon name="mail" size="24px" />
            <h3>商务合作</h3>
            <p>business@example.com</p>
          </div>
        </t-col>
        <t-col :span="8">
          <div class="contact-card">
            <t-icon name="help-circle" size="24px" />
            <h3>技术支持</h3>
            <p>support@example.com</p>
          </div>
        </t-col>
        <t-col :span="8">
          <div class="contact-card">
            <t-icon name="user-circle" size="24px" />
            <h3>加入我们</h3>
            <p>career@example.com</p>
          </div>
        </t-col>
      </t-row>
    </div>

    <!-- Footer -->
    <t-footer class="footer">
      <div class="footer-content">
        <p>Copyright © 2024 Tencent Cloud. All Rights Reserved.</p>
      </div>
    </t-footer>
  </div>
</template>

<style lang="less" scoped>
.about {
  .header {
    position: fixed;
    width: 100%;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 100;

    &-content {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      height: 100%;

      .logo {
        margin-right: 40px;
        img {
          height: 32px;
        }
      }

      .header-right {
        margin-left: auto;
      }
    }
  }

  .about-hero {
    padding-top: 144px;
    padding-bottom: 80px;
    background: linear-gradient(135deg, #0052D9 0%, #0594FA 100%);
    color: white;
    text-align: center;

    h1 {
      font-size: 48px;
      margin-bottom: 24px;
    }

    p {
      font-size: 20px;
    }
  }

  .company-info {
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 20px;

    .info-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;

      .info-card {
        padding: 32px;
        background: #f5f5f5;
        border-radius: 8px;
        transition: transform 0.3s;

        &:hover {
          transform: translateY(-8px);
        }

        h3 {
          font-size: 24px;
          margin-bottom: 16px;
          color: #0052D9;
        }

        p {
          font-size: 16px;
          line-height: 1.6;
          color: #333;
        }
      }
    }
  }

  .statistics {
    background: #f9f9f9;
    padding: 80px 0;

    .stat-item {
      text-align: center;

      h2 {
        font-size: 48px;
        color: #0052D9;
        margin-bottom: 16px;
      }

      p {
        font-size: 18px;
        color: #666;
      }
    }
  }

  .milestones {
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 20px;

    h2 {
      text-align: center;
      font-size: 36px;
      margin-bottom: 48px;
    }

    .milestone-content {
      h3 {
        font-size: 20px;
        color: #0052D9;
        margin-bottom: 8px;
      }

      p {
        color: #666;
      }
    }
  }

  .partners {
    background: #f5f7fa;
    padding: 80px 20px;

    h2 {
      text-align: center;
      font-size: 36px;
      margin-bottom: 48px;
    }

    .partner-grid {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;

      .partner-card {
        background: white;
        padding: 24px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s;

        &:hover {
          transform: translateY(-8px);
        }

        img {
          max-width: 100%;
          height: auto;
        }
      }
    }
  }

  .contact {
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 20px;

    h2 {
      text-align: center;
      font-size: 36px;
      margin-bottom: 48px;
    }

    .contact-card {
      text-align: center;
      padding: 32px;
      background: #f5f7fa;
      border-radius: 8px;
      transition: transform 0.3s;

      &:hover {
        transform: translateY(-8px);
      }

      h3 {
        margin: 16px 0 8px;
        font-size: 20px;
      }

      p {
        color: #666;
      }
    }
  }

  .footer {
    background: #f5f7fa;
    padding: 32px 0;

    &-content {
      text-align: center;
      color: #666;
    }
  }
}
</style>